<template>
  <AlexButton @click="show_dialog = true">按钮测试</AlexButton>
  <AlexDialog v-model:show="show_dialog" backdrop="rgba(247, 248, 249, 0.75)">
    <div
      style="
        padding: 20px;
        width: 60vw;
        height: 30vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
      "
    >
      <!-- steps 如果需要配置颜色 可以 
            successColor="#70b6ff" 
            activeColor="#02e20f" 
            pendingColor="#b8bac0"
            background="#a8abb2" -->
      <div style="width: 50vw">
        <AlexSteps :active="active" :countStep="steps.length">
          <AlexStep
            v-for="(step, index) in steps"
            :key="index"
            :title="step.label"
            :stepIndex="index"
          />
        </AlexSteps>
      </div>

      <!-- svg -->
      <div>
        <AlexSVG
          src="https://svgsilh.com/svg/1801287.svg"
          color="lightblue"
          width="3rem"
        />
        <AlexSVG
          src="https://svgsilh.com/svg/1801287.svg"
          color="lightblue"
          height="5rem"
        />
      </div>

      <!-- select -->
      <AlexSelect v-model="active" placeholder="不是用插槽">
        <AlexOption
          v-for="(item, index) in steps"
          :key="index"
          :label="item.label"
          :value="index"
        />
      </AlexSelect>

      <AlexSelect v-model="active" placeholder="使用插槽">
        <AlexOption
          v-for="(item, index) in steps"
          :key="index"
          :label="item.label"
          :value="index"
        >
          {{ item.label }}
        </AlexOption>
      </AlexSelect>
    </div>
  </AlexDialog>
</template>

<script setup>
import { ref } from "vue";
const steps = ref([
  { label: "编辑" },
  { label: "提交" },
  { label: "审核" },
  { label: "展示" },
]);

const active = ref(1);

const show_dialog = ref(false);
</script>
